<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body class="dpflex col">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="img" src="./img/index-swiper-bg1.jpg" alt="">
            </div>
            <div  class="swiper-slide">
                <img class="img"  src="./img/index-swiper-bg2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img class="img"  src="./img/index-swiper-bg3.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
        
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <main  class="flex1">
        <div class="line1 dpflex mt20">
            <div class="box1 dpflex">
                <p class="rpg">今日排名</p> 
                <p class="min"></p>
            </div>
            <div class="box2 dpflex">
                <p class="daka">累积打卡
                   <span class="ka"></span>
                    天</p>
                <p class="cishu">今日打卡</p>
            </div>
        </div>
        <div class="line2 dpflex mt20">
            <div class="shuju">
                <div>运动数据</div> 
            </div>
            <div class="huizhang">
                <div class="leiji">累积运动徽章</div>
                <div class="geshu"></div>
                <div class="mei">枚</div>
            </div>
        </div>
        <div class="line3 mt20">
            <div>课程训练</div>
        </div>
        <div class="line4 mt20">
            <div>
                户外跑步
            </div>
        </div>
    </main>
</body>
</html>